{extend name="property/public/insidePageBase" /}
{block name="title"}添加房间{/block}
{block name="css"}{__block__}
<style>
    body{  margin:0;  }
    .layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}
    body .layui-iconpicker .layui-iconpicker-icon-item{ width: 20.1%; }
    body{ background-color: #ffffff; }
    .layui-upload-img-box { float:left;  margin-bottom: 2px; margin-right: 2px; background: #e0e0e0;padding: 1px; }
    .layui-upload-img {  width: 82px;   height: 82px; margin-bottom: 1px; }
</style>
{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form  layui-form-pane">
            {if $siteInfo['attr_value']}
                {foreach $siteInfo['attr_value'] as $k=>$v}
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">巡检类目</label>
                                <div class="layui-input-block">
                                    <input type="text" name="data[{$k}][cate_name]" value="{$v['name'] ?? ''}" disabled autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item" pane="">
                                <label class="layui-form-label">巡检情况</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="data[{$k}][status]" lay-filter="status" data-index="{$k}" value="1" title="正常" />
                                    <input type="radio" name="data[{$k}][status]" lay-filter="status" data-index="{$k}" value="2" title="异常" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row abnormal_show" data-index="{$k}" style="display: none;">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">备注说明</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="data[{$k}][remark]"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">异常图片</label>
                                <div class="layui-input-block" id="image_info">
                                    <button type="button" class="layui-btn upload_imgs" data-index="{$k}"  lay-data="{field: 'picture',data:{dir:'property/property_facilities_access', field:'picture'}}">上传图片</button>
                                    <div class="layui-upload-list img_show" data-index="{$k}"> </div>
                                    <div style="clear: both"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                {/foreach}
            {/if}
            <div class="layui-form-item layui-hide">
                <button type="button" class="layui-btn layui-btn-primary replaceUploadImg toggleUpload" lay-data="{}"></button>
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$;
        $('.upload_imgs').selectImages({
            confirm:function(res,elem) {
                let showIndex = $(elem).data('index')
                console.log('showIndex', showIndex)
                console.log('elem', elem)
                for(var i in res) {
                    index = (new Date()).getTime()+''+i;
                    $('.img_show[data-index="'+showIndex+'"]').append('<div class="layui-upload-img-box" id="'+index+'">' +
                        '<img src="' + res[i].src + '" class="layui-upload-img checkPictureByImg">' +
                        '<input type="hidden" name="data['+showIndex+'][pictures][]" value="' + res[i].src + '">' +
                        '<p>' +
                        '<a class="layui-btn layui-btn-xs cftoggleUpload" style="float: left" lay-data="{field: \'picture\',data:{dir:\'room/room\', field:\'picture\', replace_upload_index: \''+index+'\'}}">修改</a>' +
                        '<a class="layui-btn layui-btn-xs layui-btn-danger" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);" style="float: right">删除</a>' +
                        '</p>' +
                        '</div>'
                    );
                }
            }
        });
        $(document).on('click', '.cftoggleUpload', function () {
            $('.toggleUpload').attr('lay-data', $(this).attr('lay-data'));
            $('.toggleUpload').trigger('click');
        });
        $('.replaceUploadImg').selectImages({
            confirm:function(res,elem,data) {
                let replaceUploadObj = $('#'+data.data.replace_upload_index);
                replaceUploadObj.find('img').attr('src', res[0].src);
                replaceUploadObj.find('img').attr('alt', res[0].src);
                replaceUploadObj.find('input').val(res[0].src);
            }
        });

        form.on('radio(status)', function(elem) {
            console.log('elem', elem)
            console.log('elem.elem', elem.elem)
            console.log('elem.elem', $(elem.elem).data('index'))

            let value = elem.value
            let index = $(elem.elem).data('index');
            if(value == 1) {
                $('.abnormal_show[data-index="'+index+'"]').hide()
            } else{
                $('.abnormal_show[data-index="'+index+'"]').show()
            }
        })
    });
</script>
{/block}